<template>
	<view class="page-body">
		<vk-data-page-header
			:title="page.title"
			:show-back="true"
			@back="pageBack()"
		></vk-data-page-header>
		<view class="page-body">
			<vk-data-form
				ref="form1"
				v-model="form1"
				:rules="formData1.rules"
				:action="formData1.action"
				:form-type="formData1.formType"
				:columns='formData1.columns'
				label-width="100px"
				:footer-show="false"
				:loading.sync="formData1.loading"
				:before-action="formData1.beforeAction"
				@success="formSuccess">
				<!-- <template v-slot:desc="{ form, keyName }">
				   <div style="border: 1px solid #ccc;z-index:999;">
					   <Toolbar
						   style="border-bottom: 1px solid #ccc"
						   :editor="editor"
						   :defaultConfig="vk.myfn.toolbarConfig()"
						   mode="default"
					   />
					   <Editor
						   style="height: 320px; overflow-y: hidden;"
						   v-model="form[keyName]"
						   :defaultConfig="vk.myfn.editorConfig('输入内容')"
						   mode="default"
						   @onCreated="onCreated"
					   />
				   </div>
				</template> -->
			</vk-data-form>
		</view>	
		<view class="page-footer">
			<!-- 页面底部内容开始 -->
			<el-button plain class="footer-back-btn" @click="pageBack()">返回</el-button>
			<el-button :loading="formData1.loading" type="primary" class="footer-update-btn" @click="submitForm" style="margin-left: 50px;">{{ page.submitText }}</el-button>
			<!-- 页面底部内容开始 -->
		</view>
	</view>
</template>

<script>
	var that;													// 当前页面对象
	var vk = uni.vk;									// vk实例
	var originalForms = {};						// 表单初始化数据
	import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
	import { nextTick } from "vue";
	export default {
		data() {
			// 页面数据变量
			return {
				editor: null,
				page:{
					title:"",
					submitText:"",
					pickerOptions:vk.pubfn.elementUtil.datePickerRangeOptions(),
					backPage:"/pages/site/list"
				},
				form1: {
					tabbar: [],
					tel: "",
					email: "",
					main_color: "#323130",
					font_color: "#FFFFFF",
					children: [],
					location: null,
				},
				formData1: {
					loading:false,
					formType: "",
					beforeAction: function(){
						
					},	
					action:"admin/sys/site.addUpdate",
					columns: [
						{ 
							key:"name", title:"站点名称", type:"text"
						},
						{
							key:"icon", title:"站点小图标", type: "file-select", multiple: false, fileType: "image"
						},
						{
							key:"icon_w", title:"站点大图标", type: "file-select", multiple: false, fileType: "image"
						},
						{ key:"", title:"站点介绍", type:"bar-title" },
						// { 
						// 	key:"desc", title:"", type:"text"
						// },
						{ key:"main_color", title:"主色", type:"color" },
						{ key:"font_color", title:"字体颜色", type:"color" },
						{ key:"", title:"联系方式", type:"bar-title" },
						{ key:"tel", title:"电话", type:"text" },
						{ key:"email", title:"邮箱", type:"text" },
						{ key:"", title:"分享配置", type:"bar-title" },
						{ key: "share", title: "", type: "object", showLabel:false,
							columns:[
								{ key: "title", title: "分享标题", type: "text", width:400, tips:"一个好的标题可以吸引用户点进来" },
								{ key: "image", title: "分享封面", type: "image", limit:1, tips:"一个好看的封面可以吸引用户点进来，建议尺寸：1000*800（5:4）" }
							]
						},
						{ key:"", title:"所在区域", type:"bar-title" },
						{
							key:"area_code", title:"", type:"table-select", placeholder:"请选择区域" ,
							action:"admin/sys/zone.getList",
							pageSize: 10,
							columns: [
							    { key: "area_code", title: "区域id", type: "text" ,idKey: true},
							    { key: "merger_name", title: "区域全名", type: "text", nameKey: true}, // idKey:true 代表此字段为主键字段，若设置show:["none"],则可以在表格中隐藏该字段的显示
							    { key: "name", title: "区域简称", type: "text" }
							],
							queryColumns: [
							    { key: "merger_name", title: "区域名称", type: "text", width: 150, mode: "%%" },
							],
							onChange:(val, formData, column, index, option)=>{
								if(val){
									that.$nextTick(()=>{
										formData.location = option;
									})
								}else{
									that.$nextTick(()=>{
										formData.location = {};
									})
								}
								
							}
						},
					],
					rules: {
						name: [
							{ required: true, message:'站点名称不能为空', trigger:'blur' },
						],
						icon: [
							{ required: true, message:'小图标不能为空', trigger: ['blur','change'] },
						],
						icon_w: [
							{ required: true, message:'大图标不能为空', trigger: ['blur','change'] },
						]
					}
				}
			};
		},
		// 监听 - 页面每次【加载时】执行(如：前进)
		onLoad(options = {}) {
			that = this;
			vk = that.vk;
			that.options = options;
			that.init(options);
		},
		// 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发
		onReady() {},
		// 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
		onShow() {},
		// 监听 - 页面每次【隐藏时】执行(如：返回)
		onHide() {},
		// 函数
		methods: {
			// 页面数据初始化函数
			init(options) {
				originalForms["form1"] = vk.pubfn.copyObject(that.form1);
				that.formData1.formType = options.mode;
				that.form1.mode = options.mode;
				if(options.mode === "update"){
					that.page.title = "站点编辑";
					that.page.submitText = "修改";
					vk.callFunction({
						url: 'admin/pub/site.getInfo',
						title:'请求中...',
						data:{
							_id:options._id
						},
						success:function(data) {
							let form1 = vk.pubfn.copyObject(that.form1);
							
							let info = data.info;
							
							if(info.contact && info.contact.tel){
								info.tel = info.contact.tel
							}
							if(info.contact && info.contact.email){
								info.email = info.contact.email
							}
							
							that.form1 = vk.pubfn.objectAssign(form1, info);
						}
					});
				}
				else{
					that.page.title = "站点添加";
					that.page.submitText = "添加";
				}
			},
			// 页面跳转
			pageTo(path) {
				vk.navigateTo(path);
			},
			pageBack(res={}){
				if (res.formType == "update") {
					const eventChannel = this.getOpenerEventChannel();
					if (eventChannel.emit) eventChannel.emit('update', res.data.info);
				} else if (res.formType == "add") {
					const eventChannel = this.getOpenerEventChannel();
					if (eventChannel.emit) eventChannel.emit('add');
				}
				const pages = getCurrentPages();
				if (pages.length>1 && pages[0].route !== that.$page.route) {
					vk.navigateBack();
				} else if(that.page.backPage) {
					vk.navigateTo(that.page.backPage);
				}
				setTimeout(()=>{
					vk.menuTabs.closeTabs("/pages/site/edit");
				},600);
			},
			// 表单重置
			resetForm(){
				vk.pubfn.resetForm(originalForms, that);
			},
			// 表单提交
			submitForm(){
				that.form1.mode = that.options.mode;
				that.$refs.form1.submitForm();
			},
			formSuccess(res){
				if(that.formData1.formType == "add"){
					that.$alert('添加成功', '提示', {
						confirmButtonText: '好的',
						callback: action => {
							that.pageBack(res);
						}
					});
				}else{
					that.$alert('修改成功', '提示', {
						confirmButtonText: '好的',
						callback: action => {
							that.pageBack(res);
						}
					});
				}
			},
			onCreated(editor) {
				this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
			},
			
			beforeDestroy() {
				const editor = this.editor;
				if (editor !== null){
					editor.destroy() // 组件销毁时，及时销毁编辑器
				} 
			}
		},
		// 监听属性
		watch: {
			
		},
		// 过滤器
		filters: {

		},
		// 计算属性
		computed: {

		},
		components: {
			Toolbar,
			Editor
		},
	};
</script>
<style lang="scss" scoped>
	.page-body {

	}
</style>
